import React,{useImperativeHandle,forwardRef,useState} from 'react';

import { makeStyles } from '@material-ui/core/styles';

import DangerousInnerHtml from './DangerousInnerHtml';
import { Backdrop, Snackbar ,Typography} from '@material-ui/core';
import SystemMessage from '../SystemMessage';

const GlobalSetting=SystemMessage.globalSetting;

const Const=SystemMessage.const;

const isSmallScreen=()=>{
    var width=window.screen.width;
    return width<1280;
}

const getMiddelHight=()=>{
    var h=window.screen.height;
    return h/2;
}

const useStyles = makeStyles(theme => ({
    msgBoxWrapper: {
        minWidth: '350px',
        maxHeight: '50%',
        overflow: 'auto',
        borderRadius: "8px",
        boxShadow: "3px 3px 10px #666",
        backgroundColor:"white",
        justifyContent:"center"
    },
    titleIcon: {
        marginRight: theme.spacing(1),
        verticalAlign: 'text-bottom'
    },
    error: {
        color: theme.palette.error.main
    },
    warning: {
        color: theme.palette.warning.main
    },
    info: {
        color: theme.palette.primary.main
    },
    success: {
        color: theme.palette.success.main
    },
    confirm: {
        color: theme.palette.primary.main
    },
    input: {
        color: theme.palette.primary.main
    }
    ,backdrop: {
        zIndex: theme.zIndex.drawer + 1,
        color: theme.palette.primary.main
    }
    
}));





const SystemMessageInfo = (props,ref) => {

    const classes = useStyles();
    
    const [thisOption,setThisOption]=useState({
        type:"info"
        ,open:false
        ,description:""
        ,onClose:()=>{}
    });

    
    var thisType=thisOption["type"];
    var thisOpen=thisOption["open"];
    var thisDescription=thisOption["description"];
    var thisTitle=thisOption["title"];
    
    
    var thisHorizontal=props["horizontal"]||GlobalSetting.horizontal;
    var thisVertical=props["vertical"]||GlobalSetting.vertical;
    var thisAutoHideDuration=props["autoHideDuration"]||GlobalSetting.autoHideDuration;
    var thisBigFontSize=props["bigFontSize"]||GlobalSetting.bigFontSize;
    var thisSmallFontSize=props["smallFontSize"]||GlobalSetting.smallFontSize;
    var thisIsInfoMessageModal=props["isInfoMessageModal"]||GlobalSetting.isInfoMessageModal;

    var thisDescriptions=Array.isArray(thisDescription)?thisDescription:[thisDescription];

    var thisTop=null;
    if(thisVertical===Const.VERTICAL_MIDDLE){
        thisVertical=Const.VERTICAL_TOP;
        thisTop=getMiddelHight()-30;
    }

    var language=props["language"]||GlobalSetting.language;
    var codeVisible=props["codeVisible"];

    if(language!==Const.LANGUAGE_ENG&&language!==Const.LANGUAGE_CHI){
        language=Const.LANGUAGE_ENG;
    }
    
    const _show=(type,title,description,onClose)=>{
        thisOption["open"]=true;
        thisOption["title"]=title;
        thisOption["description"]=description;
        thisOption["type"]=type;
        thisOption["onClose"]=onClose;
        setThisOption({...thisOption});
    }

    const _showMessage=(type,messageObj,onClose)=>{
        var langPrefix=language;
        var msgKey=messageObj["functionId"]+"-"+messageObj["severityCode"]+"-"+messageObj["messageCode"];
        var title=codeVisible?"Message Code:"+msgKey :messageObj[langPrefix+"MessageHeader"];
        thisOption["open"]=true;
        thisOption["title"]=title;
        thisOption["description"]=messageObj[langPrefix+"Description"]||"";;
        thisOption["type"]=type;
        thisOption["onClose"]=onClose;
        setThisOption({...thisOption});
    }

    useImperativeHandle(ref, () => ({   
        alert: (title,message,onClose)=>{
            _show("warning",title,message,onClose);
        },
        info: (title,message,onClose)=>{
            _show("info",title,message,onClose);
        },
        confirm: (title,message,onClose)=>{
            _show("confirm",title,message,onClose);
            
        },
        error: (title,message,onClose)=>{
            _show("error",title,message,onClose);
        },
        show: (type,title,message,onClose)=>{
            _show(type,title,message,onClose);
        },
        
        alertMessage: (messageObj,onClose)=>{
            _showMessage("warning",messageObj,onClose);
        },
        infoMessage: (messageObj,onClose)=>{
            _showMessage("info",messageObj,onClose);
        },
        confirmMessage: (messageObj,onClose)=>{
            _showMessage("confirm",messageObj,onClose);
            
        },
        errorMessage: (messageObj,onClose)=>{
            _showMessage("error",messageObj,onClose);
        },
        showMessage: (type,messageObj,onClose)=>{
            _showMessage(type,messageObj,onClose);
        },

        close:()=>{
            thisOption["open"]=false;
            setThisOption({...thisOption});
        }
      }))


    return (
        <div>
        <Backdrop open={thisOpen&&thisIsInfoMessageModal} className={classes.backdrop} ></Backdrop>
        <Snackbar open={thisOpen} autoHideDuration={thisAutoHideDuration}  style={{top:thisTop}}
           anchorOrigin={{ vertical:thisVertical,horizontal:thisHorizontal }}  
           className={classes.msgBoxWrapper}  
          onClose={()=>{
            thisOption["open"]=false;

            setThisOption({...thisOption});}}>
            <div style={{textAlign:"center",padding:"10px 10px 10px 10px"}}>
                <Typography className={classes[thisType]} style={{fontSize:"18px"}}>{thisTitle}</Typography>
                {
                    thisDescriptions.map((val, idx) => {
                        return (
                                <DangerousInnerHtml html={val} key={idx} style={{fontSize:isSmallScreen?thisSmallFontSize:thisBigFontSize,marginTop:"10px"}}/>
                         )
                    })
                }
            </div>
            
        </Snackbar>
        </div>
        
    )
}



export default forwardRef(SystemMessageInfo);